<template>
    <div class="body">
        <img class="batteryLogo" src="../assets/image/battery/电量-空.png" alt="">
        <div class="content">
            <img v-show="store.state.batteryIsCharging" class="chargingLogo" src="../assets/image/battery/充电标志.png" alt="">
            <div class="text">{{ store.state.batterySignal }}</div>
        </div>
    </div>

</template>

<script>
import store from "@/store";

export default {
    name: "batteryLogo",
    computed: {
        store() {
            return store
        }
    },
    data() {
        return {
            batterySignal: null,
            batteryIsCharging: null
        }
    },
    created() {
    }
}
</script>

<style scoped>
.body{
    position: relative;
}
.batteryLogo{
    width: auto;
    height: 18px;
    position: absolute;
}
.content{
    width: 100%;
    position: absolute;
}
.chargingLogo{
    height: 14px;
    left: 32px;
    bottom: -3px;
    position: absolute;
}
.text{
    color: white;
    font-size: 12px;
    text-align: center;
    position: relative;
    top: 2px;
}
</style>